<template>
  <ItemMusicTop :playlist="state.playlist" />
  <ItemMusicList :playlist="state.playlist" />
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
import { songsheets } from "../api/user";

import ItemMusicTop from "../components/item/ItemMusicTop.vue";
import ItemMusicList from "../components/item/ItemMusicList.vue";

export default {
  setup() {
    const state = reactive({
      playlist: {},
    });
    onMounted(() => {
      let id = useRoute().query.id;
      //console.log(id)
      songsheets(id).then((res) => {
        // console.log(res)
        // console.log(res.data.playlist)
        state.playlist = res.data.playlist;
        // console.log("============")
        // console.log(state.playlist)
      });
    });
    return { state };
  },
  components: {
    ItemMusicTop,
    ItemMusicList,
  },
};
</script>
